Day9 - UI - Form, Input

form
input

前言

• Ant Design Form 我從來沒有駕馭過，但對於其排版備感認同。
  • key 欄位名 右切齊，value 長度一致
  • Button 與 上方 Input 對齊

使用 Form 的排版 加入現在的網頁-桌球王

• 應用於 隊名、隊長的填寫欄位

  
  
  

• 另外調整:將 label name 與 輸入框放同一行。

  

    <div style={{display:"inline-block"}}>
      隊名:  
    </div>
    <div style={{display:"inline-block"}}>
      <Input showCount maxLength={20} onChange={onChange}/>
    </div>
    <br/>
    <br/>
    <div style={{display:"inline-block"}}>
      隊長:  
    </div>
    <div style={{display:"inline-block"}}>
      <Input showCount maxLength={20} onChange={onChange}/>
    </div>
  

  
  

調整 Print 範圍

As-is

<Table columns={columns} dataSource={dataSource} ref={(el) => (componentRef = el)}/>

Now

<Layout ref={(el) => (componentRef = el)}> 

Code on GitHub gist

goish135

結論

仿造 Form 排版(非全部)，試圖把隊名，隊長的填寫加入網頁。